<template>
  <div id="jsmb">
    <div class="tit">
      <h2>建设目标</h2>
      <div class="empty-box"></div>
      <p>协助社区搭建信息在线，服务在线，管理在线的社区共建共治平台</p>
    </div>
    <div class="con">
      <div class="img-box">
        <img src="https://www.1nuoyun.com/uploadfile/2021/09/24/20210924174844TB1G4R.png" alt="">
      </div>
      <div class="text-box">
        <div
          class="text-item"
          v-for="item in message"
          :key="item.mainTit"
        >
          <div class="item-top">
            <h2>{{ item.mainTit }}</h2>
            <p>{{ item.content }}</p>
          </div>
          <div class="item-bot">
            <div
              class="bot-item"
              v-for="(botItem, index) in item.btn"
              :key="botItem[index]"
            >
              <div class="btns">{{ botItem.text }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Jsmb",
    data() {
      return {
        message: [
          {
            mainTit: "党建工作有效落地",
            content: "针对社区党员学习不便、效率低下的问题，建设智慧党建平台为社区党员打造线上学习宣传平台、虚拟活动阵地，加强党建引领作用。",
            btn: [
              {
                text: "线上学习"
              },
              {
                text: "虚拟活动"
              }
            ]
          },
          {
            mainTit: "社区数据可视化",
            content: "对采集汇聚的小区、房屋、人员、车辆、单位等不同要素进行归档和整合，并有机关联，实现一房一档，一车一档，一人一档，一事一档。",
            btn: [
              {
                text: "一房一档",
              },
              {
                text: "一车一档",
              },
              {
                text: "一人一档",
              },
              {
                text: "一事一档",
              },
            ]
          },
          {
            mainTit: "服务管理在线化",
            content: "建设社区治理服务平台，为矛盾纠纷处理，文明宣传，活动组织，居民诉求提供在线查看及处理平台，搭建主管单位与社区居民的交流服务桥梁。",
            btn: [
              {
                text: "文明宣传",
              },
              {
                text: "活动组织",
              },
              {
                text: "交流服务",
              },
              {
                text: "搭建平台",
              },
            ]
          },
          {
            mainTit: "共建共治人性化",
            content: "搭建共建共治的社区平台，为居民提供协商议事，电子投票、表扬曝光，活动报名等共建共治的入口，以居民为核心，聆听群众的切实需求，共建美好社区。",
            btn: [
              {
                text: "电子投票",
              },
              {
                text: "协商议事",
              },
              {
                text: "活动报名",
              },
              {
                text: "表扬曝光",
              },
            ]
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>

  @import "assets/scss/public";

  #jsmb {
    width: 62.5%;
    margin: 4rem auto;
    .tit {
      .empty-box {
        background: linear-gradient(90deg, #2f6bee, #009fff);
      }
    }
    .con {
      padding: 4rem;
      box-shadow: 0 0 1rem #f5f5f5;
      .img-box {
        margin-bottom: 3.2rem;
        img {
          width: 100%;
        }
      }
      .text-box {
        display: flex;
        justify-content: space-between;
        text-align: center;
        .text-item {
          flex: 1;
          border-right: 0.2rem solid #f5f5f5;
          .item-top {
            height: 20.4rem;
            padding: 0 3.2rem;
            margin-bottom: 2.4rem;
            h2 {
              margin-bottom: 2.4rem;
              font-size: 2.4rem;
              font-weight: 1000;
              color: #1890ff;
            }
            p {
              font-size: 1.6rem;
              color: #666;
              text-align: justify;
            }
          }
          // 按钮盒子
          .item-bot {
            // 父亲设置下外边距负值抵消儿子最后一行
            margin-bottom: -1.6rem;
            margin-left: 3.2rem;
            display: flex;
            flex-wrap: wrap;
            // 每个按钮
            .bot-item {
              // 每一个设置下外边距
              margin-bottom: 1.6rem;
              width: 50%;
              .btns {
                width: 8.8rem;
                height: 3.2rem;
                border-radius: 0.4rem;
                border: 2px solid #1890ff;
                font-size: 1.4rem;
                color: #1890ff;
                text-align: center;
                line-height: 3.2rem;
              }
            }
          }
        }
        .text-item:nth-last-child(1) {
          border-right: none;
        }
      }
    }
    .con:hover {
      transition-duration: 0.3s;
      transform: translateY(-0.5rem);
    }
  }
</style>